<template>
  <ul class="detail">
    <li class="select">
      <Skeleton :loading="props.loading">
        <template #ske>
          <div style="width: 100%">
            <div style="
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              ">
              <el-skeleton-item variant="text" style="width: 40%; height: 40px; margin: 0px 10px 0px 0" />
              <el-skeleton-item variant="text" style="width: 50%; height: 40px; margin: 0px 0 0px 0" />
            </div>
          </div>
        </template>
        <template #main>
          <span>{{ $t("language.Share.detail.input1") }}</span>
          <el-select v-model="search.memberLevel" placeholder="Select" class="de-select" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
      </Skeleton>
    </li>
    <li>
      <Skeleton :loading="props.loading">
        <template #ske>
          <div style="width: 100%">
            <div style="
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              ">
              <el-skeleton-item variant="text" style="width: 30%; height: 40px; margin: 0px 10px 0px 0" />
              <el-skeleton-item variant="text" style="width: 50%; height: 40px; margin: 0px 0 00px 0" />
            </div>
          </div>
        </template>
        <template #main>
          <span>{{ $t("language.Share.detail.input2") }}</span>
          <el-input class="de-input" v-model="search.memberId" :placeholder="$t('language.Share.memberidplacehold')" />
        </template>
      </Skeleton>
    </li>
    <li>
      <Skeleton :loading="props.loading">
        <template #ske>
          <div style="width: 100%">
            <div style="
                width: 120%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              ">
              <el-skeleton-item variant="text" style="width: 40%; height: 40px; margin: 0px 10px 0px 0" />
              <el-skeleton-item variant="text" style="width: 40%; height: 40px; margin: 0px 10px 0px 0" />
              <el-skeleton-item variant="text" style="width: 30%; height: 40px; margin: 0px 0 0px 0" />
            </div>
          </div>
        </template>
        <template #main>
          <el-date-picker style="width: 60%;" v-model="value2" class="datetimerange" type="datetimerange"
            :shortcuts="shortcuts" :start-placeholder="search.startTime" :end-placeholder="search.endTime"
            format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="hh:mm:ss" />
          <el-button class="strong" @click="initData" :loading="loadings" :disabled="loadings">{{
        $t("language.Share.detail.btn") }}</el-button>
          <!-- <strong></strong> -->
        </template>
      </Skeleton>
    </li>
    <li>
      <Skeleton :loading="props.loading">
        <template #ske>
          <div style="width: 100%">
            <el-skeleton-item variant="text" style="width: 100%; height: 120px; margin: 10px 0px 0px 0" />
            <el-skeleton-item variant="text" style="width: 100%; height: 50px; margin: 15px 0 0px 0" />
          </div>
        </template>
        <template #main>
          <table>
            <thead>
              <tr>
                <th>{{ $t("language.Share.detail.head1") }}</th>
                <th>{{ $t("language.Share.detail.head2") }}</th>
                <th>{{ $t("language.Share.detail.head3") }}</th>
                <th>{{ $t("language.Share.detail.head4") }}</th>
                <th>{{ $t("language.Share.detail.head5") }}</th>
              </tr>
            </thead>
            <tbody>

              <template v-if="detail.members.length != 0">
                <tr v-for="(item, index) in detail.members" :key="index">
                  <td>{{ item.gameId }}</td>
                  <td>{{ item.level }}</td>
                  <td>{{ item.ownPayCoins }}</td>
                  <td>{{ item.teamPayCoins }}</td>
                  <td>{{ item.bonus }}</td>
                </tr>

              </template>
              <template v-else>
                <tr>
                  <td colspan="5">{{ $t("language.Share.detail.text1") }}</td>
                </tr>
              </template>

            </tbody>
          </table>
        </template>
      </Skeleton>
    </li>
    <li>
      <Skeleton :loading="props.loading">
        <template #ske>
          <div style="width: 100%">
            <el-skeleton-item variant="text" style="width: 100%; height: 60px; margin: 20px 0px 0px 0" />
          </div>
        </template>
        <template #main>
          <p class="color">{{ $t("language.Share.detail.text2") }}</p>
        </template>
      </Skeleton>
    </li>
  </ul>
</template>

<script setup lang="ts">
import {  reactive, ref, watch,  nextTick } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
let value2 = ref<any>("")
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
//获取推广明细
let store = useStore()
let userinfo = computed(() => store.$state.userinfo)
let search = reactive(
  {
    id: userinfo.value.gameID,
    memberLevel: 0,
    memberId: "",
    startTime: getAllTime('-'),
    endTime: getAllTime('-'),
    pageIndex: 1,
    pageSize: 1
  }
)
//监视成员id
watch(() => search.memberId, () => {
  search.memberId = search.memberId.replace(/[^0-9a-zA-Z_\.]*$/g, '')
})
let loadings = ref(false)
let initData = () => {
  loadings.value = true
  let copysearch = JSON.parse(JSON.stringify(search))
  copysearch.memberId = Number(copysearch.memberId)
  useAllData('details', `/UserCenter/v1.0/Promotion/Share/Details`, copysearch).then(({ data }: { data: any }) => {
    nextTick(() => {
      detail.members = data.value.data.members
    })
  }).finally(() => {
    loadings.value = false
  })
}
let SetStartTime = (e: any) => {
  // search.startTime = formatDateTime(e)

}
let SetEndTime = (e: any) => {
  // search.endTime = formatDateTime(e)
}
initData()
let detail: any = reactive({
  members: []
})
const options = [
  {
    value: 0,
    label: t("language.Share.all"),
  },
  {
    value: 1,
    label: t("language.Share.one"),
  },
];
</script>
<style lang="scss">
.detail {
  .el-tooltip__trigger {
    border: 1px solid rgb(74, 76, 83) !important;
  }

  .is-hovering {
    border: 1px solid #0a906c !important;
  }

  .is-focused {
    border: 1px solid #0a906c !important;
  }

  .el-input__wrapper {
    background-color: rgb(39, 42, 48) !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid rgb(74, 76, 83) !important;
    box-shadow: none !important;

    &:hover {
      border: 1px solid #0a906c !important;
    }
  }
}

.el-select-dropdown__item {
  background-color: rgb(50, 53, 62) !important;
  color: #b9bdc9 !important;
}



.de-input .is-focus {
  border-color: #0a906c !important;
}

.el-picker-panel__body-wrapper,
.el-picker-panel,
.el-picker-panel__footer,
.el-date-picker,
.el-time-panel {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cancel {
  color: #fff !important;
}

.el-date-picker__header-label:hover {
  color: #fff !important;
}

.el-year-table td.current:not(.disabled) .cell {
  background-color: #0a906c !important;
  color: #fff !important;
}

.el-year-table td.today .cell {
  color: #0a906c !important;
}

.el-time-spinner__item.is-active {
  color: #fff !important;
}

.el-time-panel__btn.confirm {
  color: #0a906c !important;
}

.el-time-panel__footer {
  border-top: none !important;
}

.today .el-date-table-cell__text {
  color: #0a906c !important;
  font-weight: normal !important;
  box-shadow: none !important;
  font-weight: bold !important;
}

.current .el-date-table-cell__text {
  color: #fff !important;
  background-color: #0a906c !important;
  font-weight: normal !important;
}

.el-month-table td .cell {
  color: #fff !important;
}

.el-month-table td.current:not(.disabled) .cell {
  background-color: #0a906c !important;
}

.current .el-date-table-cell__text {
  color: #fff !important;
  background-color: #0a906c !important;
  font-weight: normal !important;
}

.el-date-picker__header-label {
  color: #fff;
}

.is-active {
  border: 1px solid #0a906c !important;
}

.current {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.next-month {
  background-color: rgb(61, 64, 72) !important;
  color: #fff !important;
}

.available {
  color: #fff !important;
}
</style>
<style scoped lang="scss">
.detail {
  width: 100%;
  padding: 0 10px;
  height: 100%;
  min-height: 500px;

  :deep(.el-input__inner) {
    color: #fff !important;
  }

  li {
    min-height: 50px;
    width: 100%;
  }

  li:nth-child(1),
  li:nth-child(2) {
    width: 90%;
    @include flex(row, flex-start, center);

    span {
      white-space: nowrap;
      margin-right: 10px;
      font-size: 16px;
      color: #b5bac8;
    }

    :deep(.el-select__wrapper) {
      border-radius: 10px;
      height: 40px;
      border: 1px solid #4a4c53;
      color: #fff;
      box-shadow: none;
      background-color: rgb(39, 42, 48);
    }

    :deep(.el-input__wrapper) {
      border-radius: 10px;
      height: 40px;
      border: 1px solid #4a4c53;
      color: #fff;
      background-color: rgb(39, 42, 48);
      box-shadow: none;
    }
  }

  li:nth-child(3) {
    overflow-x: auto;
    @include flex(row, flex-start, center);

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    span {
      font-size: 16px;
      color: #fff;
      padding: 0 10px;
    }

    :deep(.el-input__wrapper) {
      border-radius: 10px;
      height: 40px;
      border: 1px solid #4a4c53;
      color: #fff;
      box-shadow: none;
      background-color: rgb(39, 42, 48);
      width: 150px !important;
    }

    .strong {
      padding: 10px 20px;
      font-size: 14px;
      border: none;
      height: 32px;
      border-radius: 10px;
      color: #fff;
      font-weight: normal;
      margin-left: 10px;
      background: #0a906c;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    padding: 0;
    border: 1px solid #3d4148;

    th {
      text-align: center;
      font-size: 14px;
      color: #b5bac8;
      height: 100%;
      padding: 8px;
      line-height: 24px;
      font-weight: bold;
      background-color: rgb(61, 65, 72);
      border: 1px solid #4b4e55;
    }

    td {
      text-align: center;
      font-size: 14px;
      color: #b5bac8;
      padding: 20px 8px;
    }
  }

  .color {
    margin: 20px 0;
    color: #6787f1;
    text-align: center;
    font-size: 16px;
  }
}
</style>
